<template>
	<view class="box">
		<u-popup v-model="show" mode="bottom" width="90%" height="600" borderRadius="54">
			<view class="d_f j_c_c a_i_c f_d_c">
				<view class="title">
					请输入购买手机号进行登录
				</view>

				<view style="margin-top: 50rpx;">
					<u-field v-model="mobile" label="手机号" placeholder="请填写手机号" maxlength="11" type="number">
					</u-field>
					<u-field v-model="code" label="验证码" placeholder="请填写验证码" type="number" maxlength="6">
						<u-button size="mini" slot="right" type="primary" @click="getCode" shape="circle"
							:disabled="disabled">{{getCodeText}}
						</u-button>
					</u-field>
				</view>
				<image src="https://web.78keji.cn/newimgaes/loginxs.png" mode="widthFix" style="600rpx;margin-top: 40rpx;" @click="login">
				</image>
			</view>


		</u-popup>
		<u-popup v-model="shuoming" mode="center" width="90%" height="600" borderRadius="54">
			<view class="d_f j_c_c a_i_c f_d_c">
			
				<image src="https://web.78keji.cn/newimgaes/shuoming.png" mode="widthFix" style="600rpx;margin-top: 40rpx;position: relative;" >
				</image>
				
			</view>
			<image src="https://web.78keji.cn/newimgaes/quxiao.png" mode="widthFix" style="position: absolute;width: 50rpx;right:88rpx;top: 30px;" @click="shuoming=false"></image>
		
		
		</u-popup>
		<u-popup v-model="showx" mode="center" width="90%" :mask-close-able='false'>

			<image src="https://web.78keji.cn/newimgaes/zfb.png" mode="widthFix" style="width: 100%;position: relative;"></image>

			<view class="" style="width: 100%;position: absolute;top: 30rpx;">
				<view class="d_f j_c_c" style="color: #2A63D9;font-size: 36rpx;">
					确认到账支付宝账号
				</view>
				<view class="d_f j_c_c" style="width: 100%;margin-top: 48rpx;">
					<view class="d_f a_i_c "
						style="border: 1px solid #B3B3B3;width: 560rpx;height: 80rpx;border-radius: 40rpx;padding: 0 23rpx;">
						<image src="https://web.78keji.cn/newimgaes/icon.png" mode="widthFix" style="width: 43rpx;"></image>
						<view class="" style="width: 1rpx;
height: 40rpx;border-right: 1px solid #999999;margin-left: 12rpx;">

						</view>
						<input type="number" placeholder="请输入领取支付宝账号" style="margin-left: 12rpx;" v-model="content">
					</view>

				</view>
				<view class="d_f j_c_c">
					<image src="https://web.78keji.cn/newimgaes/newlq.png" mode="widthFix" style="width:536rpx;margin-top: 30rpx;"
						@click="viplingqu"></image>
				</view>

			</view>
			<view class="d_f j_c_c">
				<image src="https://web.78keji.cn/newimgaes/quxiao.png" mode="widthFix" style="width: 68rpx;" @click="showx=false"></image>
			</view>


		</u-popup>
		<u-popup v-model="showr" mode="center" width="90%" :mask-close-able='false'>

			<image src="https://web.78keji.cn/newimgaes/results.png" mode="widthFix" style="width: 100%;position: relative;"></image>
			<image src="https://web.78keji.cn/newimgaes/closex.png" mode="widthFix" style="width: 50rpx;position: absolute;top: 30rpx;z-index: 88;right: 10rpx;" @click="showr=false" ></image>
						<view class="" style="width: 100%;position: absolute;top: 30rpx;">
						
							<view class="d_f j_c_c">
								<image src="https://web.78keji.cn/newimgaes/ck.png" mode="widthFix" style="width:397rpx;margin-top: 370rpx;"
									@click="kabao"></image>
							</view>
			
						</view>
						

		</u-popup>
		<view class="" style="position: fixed;right: 0;left: 0;z-index: 1;top: 0;">
			<image src="https://web.78keji.cn/newimgaes/loginys.png" mode="widthFix" style="width: 100%;" v-if="openid"></image>
		
			<image src="https://web.78keji.cn/newimgaes/bgx.png" mode="widthFix" style="width: 100%;" v-else></image>
			<view class="d_f a_i_c" style="position: absolute;right: 50rpx;margin-top: -70rpx;font-size: 26rpx;color: #1B86FF;" @click="shuoming=true">
					<image src="https://web.78keji.cn/newimgaes/icons.png" mode="widthFix" style="width: 100%;width: 60rpx;"></image>
					领取说明
			</view>


			<view class="d_f a_i_c" style="position: absolute;top: 28rpx;left:205rpx ;">

				<view class="" style="margin-left: 56rpx;" v-if="openid">
					<view class="" style="color: white;font-size: 36rpx;">
						{{mobile}}
					</view>

				</view>

				<view class="d_f a_i_c" v-else style="margin-left: 70rpx;">
					<view class="" style="color: white;font-size: 32rpx;" @click="show=true">
						一键授权登录
					</view>

				</view>
				<image src="https://web.78keji.cn/newimgaes/loginout.png" mode="widthFix" style="width: 120rpx;margin-left: 94rpx;"
					@click="loginout" v-if="openid">
					<button v-else class="login" type="default" open-type="getAuthorize" @getAuthorize="onGetAuthorize"
						scope='phoneNumber' style="position: absolute;width: 100%;height: 70rpx;opacity: 0;"
						></button>


			</view>

		</view>

		<view class="" v-if="openid" style="padding-top: 202rpx;">



			<view class="">
				<view class="" v-if="!openid||tldata.length==0">
					<view class="d_f j_c_c">
						<image src="https://web.78keji.cn/newimgaes/no.png" mode="widthFix" style="width: 273rpx;margin-top: 143rpx;">
						</image>

					</view>
					<view class="d_f j_c_c" style="color: #808080;font-size: 24rpx;">
						暂无立减金
					</view>
				</view>

				<view class="" v-else>

					<view class="" style="margin-top: 48rpx;">

						<view v-for="(item,index) in tldata" :key="index"
							:class="index==tldata.length-1?'boss1':'boss'">

							<view class="" v-if="item.status==0||item.status==7"
								style="padding-bottom: 10rpx;background-color: #FAFAFA;">

								<image src="https://web.78keji.cn/newimgaes/back5.png" mode="widthFix" style="width: 100%;"></image>
							
								<view class="d_f" style="position: absolute;top: 0rpx;left: 30rpx;">
									<view class="d_f " style="color: #FFFFFF;font-weight: 800;">
										<view class="money">
										1
										</view>
										<view class="unit">
											元
										</view>

									

									</view>
									<view class="" style="margin-left: 70rpx;margin-top: 30rpx;">
										<view class="" style="text-align: left;color: #232323;font-weight: bold;">
											优惠券
										</view>
										<view class=""
											style="text-align: left;font-size: 16rpx;color: #0F0F0F;margin-top: 33rpx;">
											有效期{{item.starttime}}-{{item.endtime}}
										</view>
									</view>
									<view class="d_f j_c_c a_i_c" style="margin-left: 64rpx;">
										<image src="https://web.78keji.cn/newimgaes/qlingqu.png" mode="widthFix" style="width: 136rpx;margin-top: 33rpx;"
											v-if="item.status==0" @click="viplq(item)"></image>

										<image src="https://web.78keji.cn/newimgaes/timeno.png" mode="widthFix" style="width: 136rpx;margin-top: 33rpx;"
											v-if="item.status==7"></image>

									</view>
								</view>
							</view>
							<view class=""
								v-if="item.status==2||item.status==1||item.status==3||item.status==4||item.status==5||item.status==6"
								style="padding-bottom: 10rpx;background-color: #FAFAFA;">
								<image src="https://web.78keji.cn/newimgaes/yilingqu.png" mode="widthFix" style="width: 100%;"
									v-if="item.status==1"></image>
								<image src="https://web.78keji.cn/newimgaes/err.png" mode="widthFix" style="width: 100%;" v-else></image>

								<view class="d_f" style="position: absolute;top: 0rpx;left: 30rpx;">
									<view class="d_f " style="color: #9A9A9A;font-weight: 800;">
									<view class="money">
										1
									</view>
									<view class="unit">
										元
									</view>

									</view>
									<view class="" style="margin-left: 70rpx;margin-top: 30rpx;">
										<view class="" style="text-align: left;color: #9A9A9A;font-weight: bold;">
											通用立减金
										</view>
										<view class=""
											style="text-align: left;font-size: 16rpx;color: #9A9A9A;margin-top: 33rpx;">
											有效期{{item.starttime}}-{{item.endtime}}
										</view>
									</view>
									<view class="d_f j_c_c a_i_c" style="margin-left: 64rpx;">

										<view class="" style="color: #5EBB72;font-size: 24rpx;width: 136rpx;"
											v-if="item.status==1">
											<image src="https://web.78keji.cn/newimgaes/chakan.png" mode="widthFix" style="width: 100%;margin-top: 60rpx;" @click="kabao"></image>
										</view>
										<view class="" style="color: #5EBB72;font-size: 24rpx;width: 136rpx;"
											v-if="item.status==3">
											发券成功
										</view>
										<view class="" style="color: #E8593F;font-size: 24rpx;width: 136rpx;margin-top: 20rpx;"
											v-if="item.status==2">
											发券失败
											<view class="cx" @click="viplq(item)">
												重领
											</view>
										</view>
										<view class="" style="color: #E8593F;font-size: 24rpx;width: 136rpx;margin-top: 20rpx;"
											v-if="item.status==5">
											领取失败
											<view class="cx" @click="viplq(item)">
												重领
											</view>
										</view>
										<view class="" style="color: #999999;font-size: 24rpx;text-align: center;width: 136rpx"
											v-if="item.status==4">
											已核销
										</view>
										<view class="" style="color: #999999;font-size: 24rpx;text-align: center;width: 136rpx"
											v-if="item.status==6">
											已到期
										</view>


									</view>
								</view>
							</view>

						</view>
					</view>
				</view>
				<view class="" style="height: 266rpx;">

				</view>


			</view>
		</view>
		<view class="" v-else style="width: 100%;text-align: center;padding-top: 390rpx;">
			<image src="https://web.78keji.cn/newimgaes/nologins.png" mode="widthFix" style="width:543rpx;"></image>
			<view class="" style="color: #808080;font-size: 24rpx;margin-top: 20rpx;">
				请登录查看
			</view>
		</view>




	</view>
</template>

<script>
	import {
		sendSms,
		checkSms,
		ljjList,
		wxLogins,
		ljjLq,
		getProType,
		openSignDecrypt
	} from '../../api/index.js'
	import moment from '../../utils/moment.js'
	export default {
		data() {
			return {
				shuoming:false,
				content: '',
				border: true,
				showx: false,
				showr:false,
				listx: [

					{
						name: '工商银行微信立减金',
						id: '1931'
					},
					{
						name: '招商银行微信立减金',
						id: '3008'
					},
					{
						name: '农业银行微信立减金',
						id: '3009'
					},
					{
						name: '建设银行微信立减金',
						id: '3010'
					},
					{
						name: '中国银行微信立减金',
						id: '3011'
					},

				],
				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				value: '',
				shows: false,
				list: [{
					name: '优酷视频'
				}, ],
				current: 0,
				mobile: "",
				show: false,
				code: "",
				getCodeText: '获取验证码',
				getCodeBtnColor: "#ffffff",
				getCodeisWaiting: false,
				disabled: false,
				openid: "", //是否登录
				proType: '',
				xmlydata: [],
				tldata: [],
				ljjid: "", //立减金id
				idx: "", //省心会员券id


			}
		},
		components: {

		},
		methods: {
			kabao() {
				let link = "https://render.alipay.com/p/s/i/?scheme=" + encodeURIComponent(
					"alipayqr://platformapi/startapp?saId=88888888")
			
				my.ap.navigateToAlipayPage({
					path: link
				})
			
			
			},
			onGetAuthorize() {
				uni.showLoading({
					title: "授权中",
					mask: true
				})
				my.getPhoneNumber({
					success: (res) => {
						let encryptedData = res.response;
						console.log(encryptedData)
						openSignDecrypt({
							encryptedData: JSON.parse(encryptedData).response
						}).then((resx) => {
							console.log(resx)
							uni.hideLoading()
							this.time = 1
							uni.setStorageSync('mobile', resx.data.mobile)
							uni.setStorageSync('openid', resx.data.openid)
							this.mobile = resx.data.mobile
							this.openid = resx.data.openid
								this.getdata()
							
						})
			
					},
					fail: (res) => {
						console.log(res);
						uni.hideLoading()
						console.log('getPhoneNumber_fail');
					},
				});
			
			
			},
			add(item) {
				this.shows = true
				this.ljjid = item
			},
			viplq(item) {
				console.log()

				this.idx = item.id

				console.log(item)
				
					this.showx = true
			


			},
			//支付宝领取
			viplingqu() {
				uni.showLoading({
					title: '领取中，请稍等',
					mask: true
				});
				ljjLq({
					openid: this.openid,
					type: 3,
					id: this.idx,
					account: this.content,
					accountType: 1,
					bankType: 2

				}).then((res) => {
					uni.showToast({
						title: res.msg,
						icon: "none"
					}); //弹出提示框
					this.showx = false
					this.showr=true
					this.getdata()
				})
			},
			lingqus() {
				if (this.value == '') {

					uni.showToast({
						title: '请先选择发放立减金银行',
						icon: "error"
					}); //弹出提示框
				} else {
					uni.showLoading({
						title: '领取中，请稍等',
						mask: true
					});
					ljjLq({
						openid: this.openid,
						type: 3,
						id: this.ljjid,
						account: uni.getStorageSync('openidHF'),
						accountType: 2,
						bankType: this.value

					}).then((res) => {
						uni.showToast({
							title: res.msg,
							icon: "none"
						}); //弹出提示框
						this.shows = false
						this.getdata()
					})
				}

			},
		
			//推出登录
			loginout() {
				
				this.openid = ''
				this.xmlydata = []
				this.tldata == []
			},
			//获取验证码
			getCode() {
				sendSms({
					mobile: this.mobile,

				}).then((res) => {
					this.disabled = true
					this.getCodeText = "发送中..." //发送验证码
					this.getCodeisWaiting = true;
					setTimeout(() => {
						//this.$common.msg('验证码已发送')
						uni.showToast({
							title: '验证码已发送',
							icon: "none"
						}); //弹出提示框
						this.setTimer(); //调用定时器方法
					}, 1000)
				})
			},
			setTimer() {
				let holdTime = 60; //定义变量并赋值
				this.getCodeText = "重新获取(60)"
				//setInterval（）是一个实现定时调用的函数，可按照指定的周期（以毫秒计）来调用函数或计算表达式。
				//setInterval方法会不停地调用函数，直到 clearInterval被调用或窗口被关闭。
				this.Timer = setInterval(() => {
					if (holdTime <= 0) {
						this.disabled = false
						this.getCodeisWaiting = false;
						this.getCodeBtnColor = "#ffffff";
						this.getCodeText = "获取验证码"
						clearInterval(this.Timer); //清除该函数
						return; //返回前面
					}
					this.getCodeText = "重新获取(" + holdTime + ")"
					holdTime--;
				}, 1000)
			},
			getdatas() {

				console.log(this.current)
				ljjList({
					openid: this.openid,
					type: 3,
					proType: 2
				}).then((res) => {
					console.log(res)
					this.xmlydata = res.data


					for (var i in this.xmlydata) {
						if (this.xmlydata[i].status == 0) {
							if (Date.now() < this.xmlydata[i].starttime * 1000) {
								this.xmlydata[i].status = '7'
							}
						}

						this.xmlydata[i].starttime = moment(this.xmlydata[i].starttime * 1000).format(
							"YYYY-MM-DD")
						this.xmlydata[i].endtime = moment(this.xmlydata[i].endtime * 1000).format("YYYY-MM-DD")
					}

				})


				ljjList({
					openid: this.openid,
					type: 3,
					proType: 1
				}).then((res) => {
					console.log(res)
					this.tldata = res.data
					for (var i in this.tldata) {
						if (this.tldata[i].status == 0) {
							if (Date.now() < this.tldata[i].starttime * 1000) {
								this.tldata[i].status = '7'
							}
						}

						this.tldata[i].starttime = moment(this.tldata[i].starttime * 1000).format(
							"YYYY-MM-DD")
						this.tldata[i].endtime = moment(this.tldata[i].endtime * 1000).format("YYYY-MM-DD")
					}
				})


				ljjList({
					openid: this.openid,
					type: 3,
					proType: 3
				}).then((res) => {
					console.log(res)
					this.tldata = res.data
					for (var i in this.tldata) {
						if (this.tldata[i].status == 0) {
							if (Date.now() < this.tldata[i].starttime * 1000) {
								this.tldata[i].status = '7'
							}
						}

						this.tldata[i].starttime = moment(this.tldata[i].starttime * 1000).format(
							"YYYY-MM-DD")
						this.tldata[i].endtime = moment(this.tldata[i].endtime * 1000).format("YYYY-MM-DD")
					}
				})

			},
			//点击喜马拉雅获取数据
			getxmly() {
				ljjList({
					openid: this.openid,
					type: 3,
					proType: this.proType
				}).then((res) => {
					console.log(res)
					this.xmlydata = res.data


					for (var i in this.xmlydata) {
						if (this.xmlydata[i].status == 0) {
							if (Date.now() < this.xmlydata[i].starttime * 1000) {
								this.xmlydata[i].status = '7'
							}
						}

						this.xmlydata[i].starttime = moment(this.xmlydata[i].starttime * 1000).format(
							"YYYY-MM-DD")
						this.xmlydata[i].endtime = moment(this.xmlydata[i].endtime * 1000).format("YYYY-MM-DD")
					}

				})
			},
			//d点击非喜马拉雅数据
			gettldata() {
				ljjList({
					openid: this.openid,
					type: 3,
					proType: this.proType
				}).then((res) => {
					console.log(res)
					this.tldata = res.data
					for (var i in this.tldata) {
						if (this.tldata[i].status == 0) {
							if (Date.now() < this.tldata[i].starttime * 1000) {
								this.tldata[i].status = '7'
							}
						}

						this.tldata[i].starttime = moment(this.tldata[i].starttime * 1000).format(
							"YYYY-MM-DD")
						this.tldata[i].endtime = moment(this.tldata[i].endtime * 1000).format("YYYY-MM-DD")
					}
				})
			},
			getdata() {
				this.proType = 5
				this.gettldata()


			},
			getUrlCode(name) {
				return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) ||
					[, ''
					])[1]
					.replace(/\+/g, '%20')) || null
			},
			checkWeChatCode() {
				let code = this.getUrlCode('code')
				if (code) {
					wxLogins({
						code: code,
						type: 2,
						proid: ''
					}).then((res) => {
						if (res.code == 1) {
							console.log(res)

							uni.setStorageSync('openidHF', res.data.openidH5)



						} else {
							this.changes()
						}
					}).catch((err) => {
						this.changes()
					})
				} else {
					this.changes()
				}
			},
		
			changes() {
				// let local ='https://h5.2018sx.cn/billh5/' ; //获取当前页面地址作为回调地址

				let local = encodeURIComponent('https://h5.2018sx.cn/yklq/#/')

				let appid = 'wx56cb827300659f82'
				//通过微信官方接口获取code之后，会重新刷新设置的回调地址【redirect_uri】
				window.location.href =
					`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${local}&response_type=code&scope=snsapi_base&state=${this.current}#wechat_redirect`
			},
			//点击登录
			login() {
				if (this.code == '') {
					uni.showToast({
						icon: 'none',
						title: '请输入验证码',
						duration: 2000
					});
				} else if (this.mobie == '') {
					uni.showToast({
						icon: 'none',
						title: '请输入手机号',
						duration: 2000
					});
				} else {
					checkSms({
						mobile: this.mobile,
						captcha: this.code,
						type: 3
					}).then((res) => {
						this.show = false
						uni.setStorageSync('openid', res.data.openid)
						uni.setStorageSync('mobile', res.data.mobile)
						this.mobile = uni.getStorageSync('mobile')
						this.openid = uni.getStorageSync('openid')
						this.getdata()
					})
				}

			}
		},
		onLoad(option) {
		
			if (option.openid) {
				uni.setStorageSync('openid', option.openid)
			}
			if (option.mobile) {
				uni.setStorageSync('mobile', option.mobile)
			}
			if (option.openidHF) {
				uni.setStorageSync('openidHF', option.openidHF)
			}
			if (uni.getStorageSync('openid')) {
					console.log(11111)
				this.openid = uni.getStorageSync('openid')
				this.getdata()
				
			}
			if (uni.getStorageSync('mobile')) {
				this.mobile = uni.getStorageSync('mobile')

			}
		

		},
		watch: {

		},
		computed: {

		}
	}
</script>

<style scoped lang='scss'>
	.cx {
		width: 136rpx;
		height: 50rpx;
		background: linear-gradient(90deg, #5B8CCF, #6570CB);
		border: 2px solid #FFFFFF;
		border-radius: 25rpx;
		line-height: 50rpx;
		color: #FFFFFF;
		margin-top: 15rpx;
	}

	.money {
		font-size: 90rpx;
		color: white;
		margin-top: 16rpx;
		margin-left: 10rpx;
	}

	.unit {
		margin-top: 76rpx;
		color: white;
		font-size: 28rpx;
	}

	.box {
		background-color: #FFFFFF;
		min-height: 100vh;
	}

	.title {

		font-size: 34rpx;

		font-weight: 400;
		color: #1A1A1A;
		margin-top: 50rpx;

	}

	.boss1 {
		background-color: white;
		width: 662rpx;
		border-radius: 12rpx;
		margin: 0 auto;

		text-align: center;
		position: relative;
	}

	.boss {
		background-color: white;
		width: 662rpx;

		margin: 0 auto;

		text-align: center;
		position: relative;


	}
</style>